<template>
  <div class="app-container">
    <el-row>
        <el-col :span="20">
          <div class='center'>
            <template v-if="this.$store.getters.role == 'support'">
            用户中心
          </template>
          <template v-else>
            客服中心
          </template>
          </div>
          <div class = "records" v-infinite-scroll="load" style="overflow:auto">
            <div v-for="item in records" :key="item.id">
              <el-divider>{{item.time}}</el-divider>
              <div v-if="item.type==1" style="margin-left:15px">
                <div>{{item.username}}</div>
                <div class="content" style="background: #fff;">{{item.content}}</div>
              </div>
              <div v-else style="text-align:right;margin-right:15px">
                <div>{{item.username}}</div>
                <div class="content" style="background: #FFF8EB;">{{item.content}}</div>
              </div>
            </div>
          </div>
        </el-col>
    </el-row>
    <el-form ref="questions" :model="questions" label-width="120px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="问题：" prop="question">
            <el-input 
              type="textarea"
              placeholder="请输入问题"
              :rows="4"
              v-model="questions.question"
              maxlength="100"
              show-word-limit
              :disabled="isDisabled"   
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :disabled="isDisabled">
          <template v-if="records.length==0">
            申请
          </template>
          <template v-else>
            提交
          </template>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getRecordsByOid, addRecord } from '@/api/record'
import { addOrder, getRecords } from '@/api/order'
export default {
  data() {
    return {
      records: [],
      questions: {
        question: '',
      },
      isDisabled: false
    }
  },
  methods: {
    fetchData(orderId) {
      getRecords(orderId).then(response => {
        this.records = response.data
        this.question = ''
      })
    },
    onSubmit() {
      const orderId = this.$route.query.orderId;
      if(orderId !== undefined){
        addRecord({content: this.questions.question, oid: orderId}).then(response => {
          this.records.push(response.data)
        })
      }else{
        addOrder({content: this.questions.question}).then(response => {
          // this.records = [];
          this.records.push(response.data)
        })
      }
      this.questions.question = ''
    },
    load () {
      // console.log(1)
    }
  },
  created() {
    if(this.$route.query.orderId != undefined)
      this.fetchData(this.$route.query.orderId)
    if(this.$route.query.status == 2)
      this.isDisabled = true
  }
}
</script>

<style lang="scss">
.line{
  text-align: center;
}
.center {
  margin:0 0 0 120px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  font-family: sans-serif;
}
.records {
  /* border: 1px solid black;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); */
  position: relative;
  height: 500px;
  margin: 5px 0 20px 120px;
  background: #EDEDED;
}
.content {
  display:inline-block;
  margin: 5px 15px 10px 15px;
  max-width: 375px;
  padding: 10px;
  font-size: 14px;
  font-weight: solid;
  font-family: sans-serif;
  border: 1px solid black;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.el-divider {
  margin:10px 0;
}
.el-divider__text {
  background: #EDEDED;
}
 
</style>

